<template>
  <div class="register">
    <div class="card">
      <h2>后台管理系统</h2>
      <div class="content">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input type="password" v-model="ruleForm.repassword" autocomplete="off" placeholder="请确认密码"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
            <el-button @click="resetForm('ruleForm')">清空</el-button>
          </el-form-item>
        </el-form>
        <el-link href="#/login">去登录</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getListAPI } from '@/api/index'
export default {
  name: 'register',
  data() {
    //自定义验证————验证密码是否一致
    var validatePass2 = (rule, value, callback) => {
      // value——当前输入框的值
      if (value === '') {
        callback(new Error('请再次输入密码'));
        // 通过this.ruleForm.password拿到密码框的值进行判断
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback()
      }
    };
    return {
      ruleForm: {
        password: '',
        repassword: '',
        username: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须由6-15个字符组成', trigger: 'blur' }
        ],
        repassword: [
          // validator——用来触发自定义验证的方法
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z\d]{1,10}$/, message: '用户名必须由1-10个英文字母或数字组成', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { data } = await getListAPI(this.ruleForm)
          //判断是否注册成功
          if (data.code === 1) {//注册失败
            this.$message({
              message: data.message,
              type: 'warning'
            })
            return
          } else {
            this.$message({
              message: data.message,
              type: 'success'
            });
            this.ruleForm = {}
          }


        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  height: 100vh;
  width: 100%;
  background-image: url('https://img0.baidu.com/it/u=828240000,4163445898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=278');
  background-size: cover;

  .card {
    box-sizing: border-box;
    padding: 0 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: 350px;
    background-color: #fff;
    box-shadow: 0 0 10px 2px rgb(126, 126, 126);

    h2 {
      color: rgb(40, 194, 255);
      text-align: center;
    }

    .el-form-item.btn {
      margin-bottom: 10px;
    }
  }


}
</style>